<template>
  <el-container class="layout-container">
    <el-container>
      <el-header class="el-header">
        <el-dropdown placement="bottom-end">
          <span class="el-dropdown__box">
            <div>
              <strong>当前⽤⼾：</strong>
              {{ userInfo.nickName }}
            </div>
            <el-icon>
              <ArrowDownBold />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                @click="logout"
                :icon="SwitchButton"
              >退出登录</el-dropdown-item>
            </el-dropdown-menu>
            <el-dropdown-menu>
              <el-dropdown-item
                @click="showSysUserDetail"
                :icon="Edit"
              >更新密码</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main class="layout-bottom-box">
        <div class="left">
          <el-aside
            width="200px"
            class="el-aside"
          >
            <el-menu
              class="el-menu"
              router
              :default-active="$route.path"
            >
              <el-menu-item index="/oj/layout/cuser">
                <el-icon>
                  <Management />
                </el-icon>
                <span>⽤⼾管理</span>
              </el-menu-item>

              <el-menu-item index="/oj/layout/cuserGroup">
                <el-icon>
                  <Management />
                </el-icon>
                <span>⽤⼾组管理</span>
              </el-menu-item>

              <el-menu-item index="/oj/layout/question">
                <el-icon>
                  <Management />
                </el-icon>
                <span>题⽬管理</span>
              </el-menu-item>

              <el-menu-item index="/oj/layout/exam">
                <el-icon>
                  <Management />
                </el-icon>
                <span>竞赛管理</span>
              </el-menu-item>

              <el-menu-item @click="goToSchedule">
                <el-icon>
                  <Management />
                </el-icon>
                <span>定时任务管理</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
        </div>
        <!-- 主体内容 -->
        <div class="right">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
  <el-dialog
    title="修改用户"
    v-model="isShowUpdate"
    width="500px"
  >
    <el-form
      label-width="80px"
      label-position="left"
    >
      <!-- <el-form-item label="用户名">
        <el-input v-model="userDTO.nickName"></el-input>
      </el-form-item> -->
      <el-form-item label="密码">
        <el-input
          type="password"
          show-password
          v-model="userDTO.password"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input
          type="password"
          show-password
          v-model="password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="isShowUpdate = false">取消</el-button>
        <el-button @click="updateSysUser">确认</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
  import {
    Management,
    ArrowDownBold,
    SwitchButton,
    Edit
  } from '@element-plus/icons-vue'

  import { removeToken } from '@/utils/cookie';
  import { getUserDetailByIdService, getUserInfoService, logoutService, updateUserInfoService } from '@/apis/sysUserApi';
  import { reactive, ref } from 'vue';
  import router from '@/router';
  import { getRouterScheduleService } from '@/apis/routerApi';

  const userInfo = reactive({
    nickName: ''
  })
  async function getUserInfo() {
    const { data } = await getUserInfoService()
    userInfo.nickName = data.nickName
  }
  getUserInfo();

  let url = ''
  async function getRouterUrl() {
    const { data } = await getRouterScheduleService()
    url = data.url
  }
  getRouterUrl();

  function goToSchedule() {
    let target = '_blank'
    window.open(url, target)
  }

  async function logout() {
    try {
      await ElMessageBox.confirm(
        '退出登录',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      await logoutService()
      // 清除token
      removeToken()
      router.push('/oj/login')
    } catch (error) {
      console.log(error);
    }
  }

  const isShowUpdate = ref(false)
  const userDTO = reactive({
    nickName: '',
    password: ''
  })
  const password = ref('')

  async function updateSysUser() {
    if (userDTO.password !== password.value) {
      ElMessage.error('密码不一致')
      return
    }
    await updateUserInfoService(userDTO)
    isShowUpdate.value = false
    getUserInfo()
    ElMessage.success('修改成功')
    userDTO.password = ''
  }
  function showSysUserDetail() {
    isShowUpdate.value = true
    getSysUserDetail()

  }

  async function getSysUserDetail() {
    const { data } = await getUserDetailByIdService()
    console.log(data);

    Object.assign(userDTO, data)
  }
</script>
<style lang="scss" scoped>
  .layout-container {
    height: 97.2vh;
    background: #f7f7f7;

    .layout-bottom-box {
      display: flex;
      justify-content: space-between;
      height: calc(100vh - 100px);
      overflow: hidden;

      .left {
        margin-right: 20px;
        background: #fff;
        display: flex;

        :deep(.el-menu) {
          flex: 1;

          .el-menu-item.is-active {
            color: #32c5ff;
          }

          .el-menu-item:hover {
            background: #fff;
            color: #32c5ff;
          }
        }
      }

      .right {
        flex: 1;
        overflow-y: auto;
        background: #fff;
        padding: 20px;
      }
    }

    .el-aside {
      background-color: #fff;

      &__logo {
        height: 120px;
        // background: url('@/assets/logo.png') no-repeat center / 120px auto;
      }

      .el-menu {
        border-right: none;
      }
    }

    .el-header {
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 40px;

      .el-dropdown__box {
        display: flex;
        align-items: center;

        .el-icon {
          color: #4c4141;
          margin-left: 20px;
        }

        &:active,
        &:focus {
          outline: none;
        }
      }
    }

    .el-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #666;
    }
  }
</style>